<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单排程</title>
</head>
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>

<!-- dev mock js -->
<script src="../../node_modules/mockjs/dist/mock-min.js"></script>
<script src="../static/js/mock_config.js"></script>

<!-- 自定义css -->
<style>
    * {
        color: white;
    }
    
    .card,
    .list-group,
    .list-group-item {
        text-align: center;
        background-color: transparent;
    }
    
    .el-table th,
    .el-table tr,
    .el-table {
        background-color: transparent;
    }
    
    body {
        background-color: #100c2a;
    }
    
    @media (min-width: 1400px) {
        .container-xxl,
        .container-xl,
        .container-lg,
        .container-md,
        .container-sm,
        .container {
            max-width: 1800px;
        }
    }
</style>

<body>
    <div id="app">


        <!-- 头部信息 -->
        <header>
            <div class="navbar">
                <div class="card" style="width: 18rem; background-color: transparent;  border: 0;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>订单额</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Ast_EqQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_Power" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>已交货 </h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Power">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_Standby" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>需交货</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="WaitQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_repair" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>已生产</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="RepairQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_maintain" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>待生产</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Maintenance">0</h2>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="wrapper">
            <div class="container-xl">
                <div class="row">
                    <div style="width: 100%; height: 480px; ">
                        <div class="echarts" id="echarts" style="width: 100%; height: 100%;">
                        </div>
                    </div>
                </div>
            </div>

            <div class="table">
                <div class="container-xl">
                    <div class="row">
                        <div class="vi col">
                            <h5>客户交付状况(万)<span id="D_StaffValAvg"></span></h5>
                            <el-table :data="Deliver" :default-sort="{prop: 'WorkerValue', order: 'descending'}" border height="400" style="width: 100%;" ref="Deliver">
                                <el-table-column prop="Name" align="center" label="客户">
                                </el-table-column>
                                <el-table-column prop="Value" align="center" label="价值">
                                </el-table-column>
                                <el-table-column type="index" label="排序">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="vi col">
                            <h5>客户排产状况(万)<span id="M_StaffValAvg"></span></h5>
                            <el-table :data="Production" :default-sort="{prop: 'WorkerValue', order: 'descending'}" border height="400" style="width: 100%;" ref="Production">
                                <el-table-column prop="Name" align="center" label="客户">
                                </el-table-column>
                                <el-table-column prop="Value" align="center" label="价值">
                                </el-table-column>
                                <el-table-column type="index" label="排序">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

            </div>
</body>
<script>
    function Getdate() {
        GetCodeData("VB21061718461828", "Get", "number").then(function(res) {
            $("#Ast_EqQty").text(res.rows[0].Column1)
        })

    }

    $(
        // setTimeout(function() {
        //     Getdate()
        // }, 0)
    );

    new Vue({
        el: '#app',
        data() {
            return {
                Datalist: [],
                Datalist_gp: [],
                Deliver: [],
                Production: []

            }
        },
        mounted() {
            var that = this
                // setTimeout(function() {
                //     GetCodeData('VB21061809535860', "get", "EquipmentDt").then(function(res) {
                //         that.Datalist = res.rows
                //         that.Datalist_gp = groupBy(res.rows, "SetupAddress")
                //         console.dir(that.Datalist_gp);
                //     })
                // }, 0);
        }
    })





    var chartDom = document.getElementById('echarts');
    var myChart = echarts.init(chartDom, 'dark');
    var option;

    option = {
        title: {
            text: '预计排产(万/周)',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['未排产', '额定排产', '已排产']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ['line', 'bar']
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52]
        },
        yAxis: {
            type: 'value',
            // axisLabel: {
            //     formatter: '{value}'
            // }
        },
        series: [{
            name: '未排产',
            type: 'line',
            data: [10, 111, 13, 11, 12, 12, 91],
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    }
                }
            },
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     }, {
            //         type: 'min',
            //         name: '最小值'
            //     }]
            // },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            }
        }, {
            name: '额定排产',
            type: 'line',
            data: [80],
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    }
                }
            },
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     }, {
            //         type: 'min',
            //         name: '最小值'
            //     }]
            // },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            }
        }, {
            name: '已排产',
            type: 'line',
            data: [17, 11, 153, 11, 12, 152, 9],
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    }
                }
            },
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     }, {
            //         type: 'min',
            //         name: '最小值'
            //     }]
            // },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            }
        }]
    };

    option && myChart.setOption(option);
</script>

</html>